<template>
  <el-table
    :data="userList"
    border
    style="width: 100%">
    <el-table-column
      prop="id"
      label="用户ID"
      align="center"
      width="100">
    </el-table-column>
    <el-table-column
      label="用户名"
      align="center"
      width="180">
      <template slot-scope="scope">
      {{scope.row.username}}
        <span v-if="scope.row.bizStatus === 2" class="prohibition">禁</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="name"
      align="center"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="roles"
      align="center"
      label="角色">
    </el-table-column>
    <el-table-column
      prop="phone"
      align="center"
      label="手机号">
    </el-table-column>
    <!-- <el-table-column
      prop="lasttime"
      align="center"
      label="最近登录">
    </el-table-column> -->
    <!-- <el-table-column
      prop="gmtCreate"
      align="center"
      label="用户创建时间">
    </el-table-column> -->
    <el-table-column label="操作" align="center">
      <template slot-scope="scope">
        <el-button
          size="mini"
          v-auth="'USER_EDIT'"
          type="text"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          v-auth="'USER_STATUS'"
          type="text"
          @click="handleProhibition(scope.$index, scope.row)">{{scope.row.bizStatus === 2 ? '解' : '封'}}禁用户</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>


<script>
export default {
  props: ['userList'],
  methods: {
    handleEdit (index, row) {
      this.$emit('edit', row)
    },
    handleProhibition (index, row) {
      this.$emit('prohibition', row)
    }
  }
}
</script>


<style scoped>
  .prohibition {
    line-height: 20px;
    text-align: center;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #eee;
    color: red;
  }
</style>
